<template>
  <div class="breadcrumb">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-if="showBackButton">
        <span class="back-link" @click="goBack">{{ $t('返回') }}</span>
      </el-breadcrumb-item>
      <template v-else>
        <el-breadcrumb-item  :to="{ path: '/' }">{{ $t('首页') }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ route.query.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { getCategoryName } from '@/types/category'

const route = useRoute()
const router = useRouter()

// 判断是否显示返回按钮
const showBackButton = computed(() => {
  return ['ProductDetail', 'Cart', 'Checkout'].includes(route.name as string)
})

// 返回上一页方法
const goBack = () => {
  router.back()
}
</script>

<script lang="ts">
export default {
  name: 'Breadcrumb'
}
</script>

<style lang="scss" scoped>
.breadcrumb {
  margin-bottom: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;

  .back-link {
    color: #606266;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: #409eff;
    }

    &:active {
      color: #3a8ee6;
    }
  }

  :deep(.el-breadcrumb__item) {
    .el-breadcrumb__inner {
      &.is-link:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
